<template>
	<view class="contain flex f-c .f-j-start" >
		<view class="padding-15">
			<!-- #ifndef H5 -->
			<view :style="{'padding-top': top+30+'px'}"></view>
			<!-- #endif -->
			<view class="padding-20"></view>
			<view class="padding-6"></view>

			<view class="padding-lr12" >
				<view class="f20-size f-w-b">注销账号</view>

				<view class="padding-tb6"></view>

				<view class="flex h-50 b-radius-30 bg-color-f1 margin-t8">
					<view class="flex  f-a-c f-j-c f-s-0 icon-item f-w-b">+86</view>
					<view class="flex flex-1 padding-lr12">
						<input class="f16-size" v-model="phone" type="number" maxlength="11" :placeholder="i18n['请输入登录账号']">
					</view>
				</view>
				<view class="flex h-50 b-radius-30 bg-color-f1 margin-t8 over-h">
					<view class="flex  f-a-c f-j-c f-s-0 icon-item f-w-b">
						<image class="w-20" src="https://qiniu.ccchongya.com/login_code.png" mode="widthFix"></image>
					</view>
					<view class="flex flex-1 padding-lr12">
						<input class="f16-size" v-model="code" type="number"  :placeholder="i18n['请输入验证码']">
					</view>
					<view class="flex f-a-c f-s-0">
						<img-code ref="imgCode" @imgSuc="getImgCode" class="flex  h-30"></img-code>
					</view>
				</view>
				<view class="flex h-50 b-radius-30 bg-color-f1 margin-t8">
					<view class="flex  f-a-c f-j-c f-s-0 icon-item f-w-b">
						<image class="w-20" src="https://qiniu.ccchongya.com/login_code.png" mode="widthFix"></image>
					</view>
					<view class="flex flex-1 padding-lr12">
						<input class="f16-size" v-model="sms" type="tel"  :placeholder="i18n['请输入手机验证码']">
					</view>
					<view class="padding-6">
						<phone-code ref="phonecode" :codeImg="codeImg" :code="code" :phone="phone"  :sendType="3"  ></phone-code>
					</view>
				</view>



				<view @click="logoff"
					class="flex f-a-c f-j-c b-radius-30 h-44 bg-color-linear-y t-color-w f-w-500 margin-t20">
					确认注销
				</view>


			</view>
			<view class="padding-15 safe-area box-c" :style="isIphonex ? 'padding-bottom:34px;' : ''">

				<view @click="isAgree = !isAgree" class="flex f-a-c margin-t12">
					<view class="padding-6"></view>
					<text :class="isAgree ? 'van-icon-checked t-color-y' : 'van-icon-circle t-color-b'" class="flex f-a-c f-j-c van-icon  f16-size margin-r4"></text>
					<text class="margin-r4 flex f-s-0">{{i18n['已阅读并同意']}}</text>
					<text @click="go('/pages/user/rules?type=1')" class="t-color-blue1 margin-r4  flex f-s-0">《{{i18n['用户协议']}}》</text>
					<text @click="go('/pages/user/rules?type=2')" class="t-color-blue1  flex f-s-0">《{{i18n['隐私政策']}}》</text>
				</view>
				<view class="padding-6"></view>
				<xieyi ref='xieyi' @agree="agree"></xieyi>
			</view>




		</view>













	</view>
</template>
<script>
import xieyi from '@/pages/user/components/xieyi.vue';
	import imgCode from '@/components/common/imgcode.vue';
	import phoneCode from '@/components/common/phonecode.vue';
	const $ = require('@/utils/api.js');
	const api = require('@/utils/validate.js');

	import wechat from "@/utils/libs/wechat";
	import {
		Debounce
	} from '@/utils/libs/uniApi.js'
	// import util from "@/utils/tools";


	import {
		getLoginConfig,
		appAuth,
		appleLogin,
		wechatAuth
	} from "@/utils/api/shops";


	let nums = 0;
	export default {
		data() {
			return {
				currentlogin: 0,

				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				phone: '',
				password: '',
				sms: '',
				code: '',
				codeImg: '',
				isAgree: false,
				// url: '',
				isXcx: false,


				platform: '',
				appLoginStatus: false, // 微信登录强制绑定手机号码状态
				appUserInfo: {}, // 微信登录保存的用户信息
				appleLoginStatus: false, // 苹果登录强制绑定手机号码状态
				appleUserInfo: null,
				appleShow: false, // 苹果登录版本必须要求ios13以上的
				// theme: app.globalData.theme,


			};
		},
		onLoad: function(options) {


			let self = this
			this.url = options.url ? options.url : '';
			this.init();
			// #ifdef MP-WEIXIN
			this.getToken();
			this.isXcx = true;
			// #endif


			uni.getSystemInfo({
				success: function(res) {
					if (res.platform.toLowerCase() == 'ios' && res.system.split(' ')[1] >= '13') {
						self.appleShow = true
						self.platform = res.platform
					}
				}
			});

		},

		mounted: function() {
			this.getCode();
			this.getLoginconfig();
		},

		methods: {
			async getLoginconfig() {
				let that = this;
				getLoginConfig().then(res => {
					that.logoUrl = res.data.logo ? res.data.logo : 'https://qiniu.ccchongya.com/logo2.png';
				});
			},

			getImgCode(res) {
				this.codeImg = res;
			},
			getToken(a, b, user) {
				const self = this;
				// 登录获取token
				$.getToken().then(res => {
					if (res.errMsg == 'request:ok') {
						switch (res.data.code) {
							case 200:
								let data = res.data.data;
								uni.setStorageSync('session_key', data.session_key);
								uni.setStorageSync('xcxopenid', data.openid);
								uni.setStorageSync('unionid', data.unionid);
								nums += 1;
								if (a) {
									if (nums >= 6) {
										nums = 0;
										uni.showToast({
											title: '授权失败,请重新授权',
											icon: 'none'
										});
									} else {
										self.postUserInfo(a, b, user, data.session_key);
									}
								}


						}
					}
				});
			},

			getUserInfo(data) {
				this.$store.commit('UPDATE_USERINFO', {
					avatar: data.avatar,
					nickname: data.nickname,
					phone: data.phone
				});
				this.$store.commit("SETUID", data.id);
				let backUrl = this.$Cache.get(BACK_URL) || "/pages/home/index";
				if (backUrl.indexOf('/pages/users/login/index') !== -1) {
					backUrl = '/pages/home/index';
				}
				uni.reLaunch({
					url: backUrl
				});
			},
			/**
			 * 从微信服务器获取用户信息
			 */
			getUserInfoxcx: function(e) {
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: res => {

						// 提交用户数据
						let encryptedData = res.encryptedData;
						let iv = res.iv;
						this.postUserInfo(encryptedData, iv, res.userInfo);

					}
				});

			},
			/**
			 * 提交用户信息
			 */
			postUserInfo: function(a, b, user, session_key) {
				const self = this;
				if (!session_key) {
					session_key = ''
				};
				// if (!uni.getStorageSync('unionid')) {//公众号和小程序一起才需要unionid
				// 	self.getToken(a, b, user);
				// 	return;
				// }
				if (!uni.getStorageSync('session_key') && session_key != '') {
					self.getToken(a, b, user);
					return;
				}
				let postData = {
					encryptedData: a,
					iv: b,
					sessionKey: session_key != '' ? session_key : uni.getStorageSync('session_key'),
					openId: uni.getStorageSync('xcxopenid'),
					unionId: uni.getStorageSync('unionid'),
				};
				$.ajax({
					url: 'common/xcx/regitser',
					data: postData,
					method: 'POST',
					complete(res) {
						if (res.data && res.data.token) {
							uni.setStorageSync('token', res.data.tokenHead + ' ' + res.data.token);
						} else {
							//'session_key'本地缓存过期
							// uni.removeStorageSync('session_key');
							// session_key 已经失效，需要重新执行登录流程
							self.getToken(a, b, user);

							return;
						}
						if (res.code == 200) {
							uni.showToast({
								title: '登录成功',
								icon: 'none'
							});

							self.getUser();
						}
					}
				});
			},
			agree() {
				this.isAgree = true;
			},
			logoff(){
				const self = this;



				if (this.phone == '') {
					this.$toast(self.i18n['请输入登录账号']);
					return;
				}
				// if (this.password == '' || this.password.length < 6) {
				// 	this.$toast(self.i18n['请输入正确密码']);
				// 	return;
				// }
				if (this.sms == '' || this.sms.length < 6) {
					this.$toast(self.i18n['请输入验证码']);
					return;
				}


				// if (this.code == '') {
				// 	this.$toast(self.i18n['请输入图形验证码']);
				// 	return;
				// }
				if (!self.isAgree) {
					// $.$toast(self.i18n['请阅读并同意用户协议']);
					self.$refs.xieyi.open();
					return;
				}

				uni.showModal({
					content: '确定要注销账号么？',
					success: e => {
						if (e.confirm) {

										$.ajax({
											url: 'common/logoff',
											data: {
												type: 1,
												username: this.phone,
												code: this.sms,
												registrationId: '', //	极光注册ID
												// cToken: self.$refs.imgCode.code.cToken,
												// captcha: self.code,
											},
											success(res) {
												uni.setStorageSync('token', '');
												uni.setStorageSync('userInfo', {});


												// this.$mStore.commit('login', r.data);


												$.$toast("注销成功");
												if(self.url != '') {
													self.go(self.url, 2, 2000);
												}else {
													self.go('/pages/home/index', 3, 2000);
												}
												self.socket.close();
												self.socket.creatSocket({
													onMessage(res) {}
												})
											}
										});
						}
					}
				});


			},
			login() {
				const self = this;

				if (this.phone == '') {
					this.$toast(self.i18n['请输入登录账号']);
					return;
				}
				if (this.password == '' || this.password.length < 6) {
					this.$toast(self.i18n['请输入正确密码']);
					return;
				}
				// if (this.code == '') {
				// 	this.$toast(self.i18n['请输入图形验证码']);
				// 	return;
				// }
				if (!self.isAgree) {
					// $.$toast(self.i18n['请阅读并同意用户协议']);
					self.$refs.xieyi.open();
					return;
				}
				$.ajax({
					url: 'common/login',
					data: {
						username: this.phone,
						password: this.password,
						type: 1,
						registrationId: '', //	极光注册ID
						// cToken: self.$refs.imgCode.code.cToken,
						// captcha: self.code,
					},
					success(res) {
						uni.setStorageSync('token', res.data.tokenHead + ' ' + res.data.token);
						uni.setStorageSync('userInfo', res.data.member);
						$.$toast(self.i18n['登录成功']);
						if(self.url != '') {
							self.go(self.url, 2, 2000);
						}else {
							self.go('/pages/home/index', 3, 2000);
						}
						self.socket.close();
						self.socket.creatSocket({
							onMessage(res) {}
						})
					}
				});
			},
			getUser: function() {
						const self = this;
						$.ajax({
							url: 'member/getUser',
							data: {},
							method: 'GET',
							success(res) {
								uni.setStorageSync('userInfo', res.data);
								if(!res.data.phone) {//无绑定手机情况下前往绑定手机
									$.go('/pages/wxAuth/bindphone',2);
								}else{
									if(self.url != '') {
										self.go(self.url, 2, 2000);
									}else {
										self.go('/pages/home/index', 3, 2000);
									}
									self.socket.close();
									self.socket.creatSocket({
										onMessage(res) {}
									})

								}
							}
						});
					},
			init() {},


		},
		computed: {
			i18n() {
				return this.$t('login')
			},
		},
		created() {},
		mounted() {},
		destroyed() {},
		components: {phoneCode,imgCode,xieyi},
		onPullDownRefresh() {},
		onReachBottom() {}
	}
</script>
<style scoped>
	@import url('@/static/css/passport/login.css');
	@import url('@/static/css/page/white.css');


	/* .appLogin {margin-top: 60rpx;}

	.appLogin	.hds {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24rpx;
	color: #B4B4B4;
	}

	.appLogin			.line {
	width: 68rpx;
	height: 1rpx;
	background: #CCCCCC;
	}

	.appLogin			.line 	p {
	   margin: 0 20rpx;
	}

	.appLogin		.btn-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 30rpx;
	}
	.appLogin		.btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 68rpx;
	height: 68rpx;
	border-radius: 50%;
	}

	.appLogin		.apple-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 30rpx;
	background: #000;
	border-radius: 34rpx;
	font-size: 40rpx;
	}
	.appLogin	.icon-s-pingguo {
	color: #fff;
	font-size: 40rpx;
	}


	.appLogin	.iconfont {font-size: 40rpx;color: #fff;}

	.appLogin   .wx {margin-right: 30rpx;background-color: #61C64F;}

	.appLogin	.mima {background-color: #28B3E9;}
	.appLogin	.yanzheng {background-color: #F89C23;}
	 */
</style>
<style scoped lang="scss">


	.appLogin {
		margin-top: 0;

		.hds {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #B4B4B4;

			.line {
				width: 68rpx;
				height: 1rpx;
				background: #CCCCCC;
			}

			p {
				margin: 0 20rpx;
			}
		}

		.btn-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.apple-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
				background: #000;
				border-radius: 34rpx;
				font-size: 40rpx;

				.icon-s-pingguo {
					color: #fff;
					font-size: 40rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #fff;
			}

			.wx {
				margin-right: 30rpx;
				background-color: #61C64F;
			}

			.mima {
				background-color: #28B3E9;
			}

			.yanzheng {
				background-color: #F89C23;
			}

		}
	}
</style>
